<?php
    session_start();
    if(! isset($_SESSION['username'])) {
        header('Location:index.html');
    }

    ?>

<?php include('conn.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请假信息</title>
  <link rel="stylesheet" href="./font/iconfont.css">
<script src="./font/iconfont.js"></script>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            font-size: 14px;
            margin-right:5px;
}
.div{
            position: relative;
            text-align: center;
            padding-left: 500px;
        }
        .font{
            font-size: 16px;
            font-weight: bold;;
        }
        form{
            font-weight:bold;
        }
    body {
	background-color: #F2F2F2;
}
    

form {
  font-weight: bold;
  margin-bottom: 20px;
}
tr,th {
text-align: center;
line-height: 10px;



}
td{
color:red;

 color: #337ab7;





}
 
     
       
      
        
/*        
            background: url(./663.png)no-repeat; */
        
        marquee {
            background-color: #fff;
        }
.flex {
  display:flex;
  justify-content:center;
  align-items:center;
margin-bottom: 16px;
 }
 .demo {
  width:100%;
  height:22.85px;
  position:relative;
  /* background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8); */
  color:#000;
  opacity: 0.6;
  font-size:13px;
 }
 .circle {
  width:100px;
  height:100px;
  border-radius:50%;
  position:relative;
  background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8);
  color:#fff;
 }
 .circle:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  margin:-6px;
  border:5px solid transparent;
  border-top:5px solid #f64f59;
  border-radius:50%;
  transform:rotate(45deg);
  animation:circleRotate 3s linear infinite;
 }
 @keyframes circleRotate {
  0% {
   transform:rotate(0);
  }
  100% {
   transform:rotate(360deg);
  }
 }
 
#send {
  width: 30px;
  outline: none;
  border: none;
  background: rgb(0, 132, 255);
  height: 30px;
  cursor: pointer;
  color: #fff;
  border-radius: 20px;
  font: bold 12px '宋体';
  transition: all 0.5s;
  margin-top: 30px;

}
 #in2 {
 border: none;
background-color: #F2F2F2;
}
.xjjl {
  width: 110px;
  outline: none;
  border: 1px dashed #6ac6e2;
  height: 29px;
  cursor: pointer;
  border-radius: 20px;
  font: bold 12px '宋体';
    line-height: normal;
  line-height: normal;
  transition: all 0.5s;
  margin-top: 30px;
  display: inline-block;
  line-height: 2.5;
  color: #337ab7;
  text-align: center;
}
.xjjl2 {
  font: bold 12px '宋体';
  color: #337ab7;
  text-align: center;
}
 #oi{
      width: 43px;
      border: none;
      border-radius:5px;
    }
#da{
 font-size: 30px;
}

    </style>
<script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="./js/main.js"></script>
   

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="text-align: center; font-family: 'Comic Sans MS', cursive;">
<div align="center">
  <?php
include ("menu.php");
?>

</div>
<div class="demo flex"><marquee behavior="" direction="">请假一周的数据只会保留一周，每周会清空,请假不超过一周的需要每周重新填写信息！需要更改及其它问题请点击问题反馈里选择反馈</marquee></div>
 
 <script type="text/javascript">
 /* 
功能:为矩形元素附上一层运动的边线
原理:  核心:css clip rect   web animation 负责动态化
注意:请使用较高版本现代浏览器打开  本代码 使用了es6语法 且并未对css各浏览器前缀做处理
    如需兼容低版本浏览器   请自行加 web animate polyfill 及 使用babel转译
*/
 
 
/* 使用
_initDanceBorder(el,option);
*/
 
//纯 JS实现动态边框效果
//根据 http://www.jq22.com/jquery-info3297 bee木头 作者 核心思路(css clip rect) 创作
//传入依赖元素 自动生成动态边框
 
/* 
测试用配置
*/
const options = [{}, {
 duration: 12000,
 double: false
}, {
 duration: 4000,
 'border-color': 'red',
 'easing': 'ease-in-out'
}, {
 'margin': -15,
 'borderWidth': 10,
 'border-image': "url(./wx.png) 10 10",
 
}, {
 'borderWidth': 2
}]
 
 
//使用方法
for (let i = 0; i < document.getElementsByClassName('demo').length; i++) {
 _initDanceBorder(document.getElementsByClassName('demo')[i], options[i]);
}
 
/***************************      主 体 代 码       ********************************/
 
//传入dom元素与 配置即可
function _initDanceBorder(el, options = {}) {
    //默认设置  尺寸单位均为px
    let _options = {
        //边框模糊度  
        blur: 1,
        //距依赖元素距离 
        margin: -5,
        //边框宽度  
        borderWidth: 4,
        //转一周时长  
        duration: 8000,
        //运动效果  default:匀速
        easing: 'linear',
        //是否两条运动线  默认两条
        double: true,
        //渐变色边框 优先级高  若使用渐变色或图片背景  请正确传入该值  否则边框不会显示
        'border-image': 'linear-gradient(to bottom right, #12c2e9,#c471ed,#f64f59) 10 10',
        //边框色   border-image 优先级低
        'border-color': 'green'
    }
 
    //存在正常色 不存在渐变色   渐变色赋值为空
    options['border-color'] && !options['border-image'] && (_options['border-image'] = 'none')
    //设置拷贝
    Object.keys(_options).forEach(key => {
     options[key] && (_options[key] = options[key]);
        //double 的特殊判断
        if (key == 'double' && typeof options[key] == 'boolean') {
         _options[key] = options[key]
        }
    })
 
    //元素基本属性
    const styleObj = {
     'content': '',
     'z-index': -1,
     'margin': `${_options.margin}px`,
     'border': `${_options.borderWidth}px solid`,
     'border-color': _options['border-color'],
     'border-image': _options['border-image'],
     'filter': `blur(${_options.blur}px)`,
     'position': 'absolute',
     'top': 0,
     'bottom': 0,
     'left': 0,
     'right': 0
    }
 
    const pW = el.style.width || el.offsetWidth;
    const pH = el.style.height || el.offsetHeight;
 
    const fullWidth = pW + _options.margin * -2;
    const fullHeight = pH + _options.margin * -2;
 
    //四边切割数组
    const rectArray = [
    `rect(${-_options.blur}px, ${fullWidth}px, ${-_options.margin}px, ${-_options.blur}px)`,
    `rect(0px, ${-_options.margin}px, ${fullHeight + _options.blur}px, ${-_options.blur}px)`,
    `rect(${pH}px, ${fullWidth + _options.blur}px, ${fullHeight + _options.blur}px, 0px)`,
    `rect(${-_options.blur}px, ${fullWidth + _options.blur}px, ${fullHeight}px, ${pW + _options.blur}px)`
    ]
 
    const clipAnimate = [{
     clip: rectArray[0]
    },
    {
     clip: rectArray[1],
     offset: 0.25
    },
    {
     clip: rectArray[2],
     offset: 0.5
    },
    {
     clip: rectArray[3],
     offset: 0.75
    },
    {
     clip: rectArray[0],
     offset: 1
    }
    ];
 
    //由于border的可见特性使delay无效  第二条延迟一半的边动画   从0.5开始  
    const clipAnimateTwo = [{
     clip: rectArray[2]
    },
    {
     clip: rectArray[3],
     offset: 0.25
    },
    {
     clip: rectArray[0],
     offset: 0.5
    },
    {
     clip: rectArray[1],
     offset: 0.75
    },
    {
     clip: rectArray[2],
     offset: 1
    }
    ];
 
    const animateOption = {
     duration: _options.duration,
     iterations: Infinity,
     easing: _options.easing
    };
 
    const section = initBaseEl();
 
    //Web Animations  实现keyframes动画
    section.animate(clipAnimate, animateOption);
 
    //是否两条运动线
    if (_options.double) {
     let sectionTwo = initBaseEl();
     sectionTwo.animate(clipAnimateTwo, animateOption);
    }
 
    //构造元素
    function initBaseEl() {
     const section = document.createElement("section");
        //style属性赋值
        Object.keys(styleObj).forEach(key => {
         section.style[key] = styleObj[key]
        })
 
        el.appendChild(section);
 
        return section;
    }
 
 
    //页面尺寸改变  修改
}
</script>
   <h4 class='xjjl'><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-lishijilu"></use>
    </svg>我的请假记录</h4>
<table class="table table-bordered table-hover" id="tableContent">

  <tr>

   
        <th><div align="center">  <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ID"></use>
    </svg><br>序  号</div></th>
        <th ><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xingming"></use>
    </svg><br>发起时间</th>
        <th ><div align="center"><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-kaishiriqi"></use>
    </svg><br>请假日期</div></th>
        <th ><div align="center"><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-jiezhiriqi"></use>
    </svg><br>结束日期</div></th>
        <th ><div align="center"><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-shuliangtongji"></use>
    </svg><br>天  数</div></th>
  <th ><div align="center"><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-icon-liucheng"></use>
    </svg><br>状态</div></th>

    </tr>

   <?php
    //    1. 链接数据库
    header("content-type:text/html;charset=utf8");
include('conn.php');

$sql = "select * from stu  where username='".
$_SESSION['username']."' order by id desc";
          
   $rs = mysqli_query($link, $sql); //执行sql查询
   $row = mysqli_fetch_assoc($rs);

   if (!$row) { //不存在 ；
   ?>
 <th class="xjjl2" colspan="6"><svg id="da" class="icon" aria-hidden="true">
        <use xlink:href="#icon-meiyouxiangguan"></use>
    </svg><span>暂时木有记录呀~~</span></th>
<?}?>
 <tbody id='dd'><tbody>

  
    </table>
   
<script>

function mainq(){
    $.get('/mainq.php',function(e){
        const data = JSON.parse(e)
        let dataVal = data.data;
        let divElement = ''
        for (let index = 0; index < dataVal.length; index++) {
            const element = dataVal[index];
            let a = `<tr>`
 a+=`<th>`+element['id']+`</th>`    
 a+=`<th>`+element['fq']+`</th>`    
 a+=`<th>`+element['qing']+`</th>`           
 a+=`<th>`+element['jie']+`</th>`
a+=`<th>`+element['ts']+`</th>`
a+=`<th style="line-height: 20px;"><input type="text" id="oi" disabled  style="background-color: #696969;color: #f5f5f5;"value="`+element['shen']+`"></th>`

a+=`
</tr>
</div>`
            
divElement += a;
            

        }
console.log('访问成功')

        $('#dd').html(divElement)


        var t=$('#oi').val()
   $('#oi').css("background","#f5d645")
    if(t==='已通过'){
      $('#oi').css("background","#8cde49")
    }
else if(t==="已驳回"){
      $('#oi').css("background","red")
    }

    else{
      $('#oi').css("background","#fb6e30")
    }

    })
}


$(function() {
    mainq();
    //

    setInterval(() => {
        mainq();
    }, 5000);
})
 
  </script>
</body>
</html>